---
title: 2023年12月记录

pubDatetime: 2023-12-1 00:00:00
postSlug: 2023-12
featured: false
draft: false
tags:
  - records
  - 2023-12
description: 2023年12月记录
---

## 目录

## contents

### [Web Components Eliminate JavaScript Framework Lock-in](https://jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/)

> web-components
> nanostores

### something new in 2023

#### [Array.prototype.toSorted()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted)

```js
// 不传入函数
toSorted();
// 传入箭头函数
toSorted((a, b) => {
  /* … */
});
// 传入比较函数
toSorted(compareFn);
// 內联比较函数
toSorted(function compareFn(a, b) {
  /* … */
});
```

        <div class="text-skin-blue">Array 实例的 toSorted() 方法是 sort() 方法的复制方法版本。它返回一个新数组，其元素按升序排列。</div>

#### input type

- search

        <label for="site-search">Search the site:</label>
        <input type="search" id="site-search" name="q" />
        <button>Search</button>

- week

        <label for="camp-week">Choose a week in May or June:</label>
        <input type="week" name="week" id="camp-week" min="2018-W18" max="2018-W26" required />

#### dialog tag

import VueFeature from "@components/vue/dialog/index.vue";

<VueFeature client:only="vue" />

#### [npm link](https://docs.npmjs.com/cli/v8/commands/npm-link)

> npm link 是一个 npm 命令，用于在本地开发中创建软链接，将一个本地模块链接到另一个正在开发的项目中。<br/>
> 当你在开发一个 npm 模块时，可以使用 npm link 将该模块链接到其他项目中进行测试和调试。这样做可以避免每次修改模块代码后都需要手动重新安装模块。<br />
> 使用 npm link 的步骤如下：

<div class="text-skin-purple">
  1.在要链接的模块的根目录中运行 npm link 命令。这将在全局 node_modules
  目录中创建一个指向该模块的软链接。
  <br />
  2.在要使用该模块的项目中，运行 npm link 模块名 命令。这将在项目的 node_modules
  目录中创建一个指向全局 node_modules 目录中的软链接。
</div>

#### [promise practice](https://www.codingame.com/playgrounds/347/javascript-promises-mastering-the-asynchronous/more-pratice-with-promises)

```js
function job(data) {
  return new Promise((resolve, reject) => {
    if (typeof data !== "number") {
      reject("error");
    } else if (data % 2 === 0) {
      setTimeout(() => {
        reject("even");
      }, 2000);
    } else {
      setTimeout(() => {
        resolve("odd");
      }, 1000);
    }
  });
}

module.exports = job;
```

#### [promise training](https://github.com/henriqueinonhe/promises-training)

使用 promise training 的模板
**sudo pnpm create promises-training@latest**

赋予读写权限
**sudo chmod -R 777 ./**

测试,例如
**pnpm run check src/tests/graph/1/test.test.ts**

#### [queueMicrotask()](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide)

#### [mutationObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver)

#### 正则匹配替换

```regx
/(?<=<div class=")(.*?)(?=">)/g
$1

```

#### getElement vs querySelector

getElement(s)Byxxxx 获取的是动态集合，querySelector 获取的是静态集合
动态就是选出的元素会随文档改变，静态的不会 取出来之后就和文档的改变无关了

#### [front-end weekly](https://github.com/ascoders/weekly)

#### execa

> Process execution for humans

https://www.npmjs.com/package/execa

```js
import { execa } from "execa";

const { stdout } = await execa("echo", ["unicorns"]);
console.log(stdout);
//=> 'unicorns'
```

## collections

- https://fullcalendar.io/demos
- [pnpm dlx](https://pnpm.io/cli/dlx)
- [在线查看 git 项目中某个文件更改历史](https://githistory.xyz/)
- [前端社区](https://portal.gitnation.org/)
- [intro puppeteer](https://proxiesapi.com/articles/the-complete-puppeteer-cheatsheet)
- [ts diagram](https://tsdiagram.com/)
- [react ui component mantine](https://mantine.dev/)
- [starlight use Pagefind for searching](https://starlight.astro.build/guides/site-search/)
- [use unifiedjs](https://unifiedjs.com/learn/)

## CodeHike

```python hello.py
# mark[16:24]
print("This is Code Hike")
```

- https://codehike.org/

### chown

```shell
sudo chown -R 501:20 /path/to/directory
```

> 这是一个用于修改文件或目录所有者的命令。sudo 表示需要以管理员权限运行，chown 表示修改所有者，-R 表示递归地处理目录及其子目录中的所有文件和文件夹，501:20 表示将所有者更改为用户 ID 501 和组 ID 20，/path/to/directory 表示要处理的目录的路径。

### lsof

```shell
lsof -i :3000
```

> 这是一个用于查看在本地计算机上使用端口号 3000 的进程的命令。`lsof` 是 "list open files" 的缩写，用于列出当前系统中打开的文件和进程。`-i` 参数用于指定要查看的网络连接信息，而 `:3000` 则表示要查看使用端口号 3000 的连接。通过运行这个命令，你可以查看到使用该端口的进程的详细信息，如进程 ID、进程名称等。

### [tailwind-css icon generator](https://www.designtoolshub.com/tailwind-css/icon-generator)

<svg
  class="inline-flex h-[56px] w-[56px] fill-[#160e2b]"
  viewBox="0 0 512 512"
  xmlns="http://www.w3.org/2000/svg"
>
  <path d="M326.7 403.7c-22.1 8-45.9 12.3-70.7 12.3s-48.7-4.4-70.7-12.3c-.3-.1-.5-.2-.8-.3c-30-11-56.8-28.7-78.6-51.4C70 314.6 48 263.9 48 208C48 93.1 141.1 0 256 0S464 93.1 464 208c0 55.9-22 106.6-57.9 144c-1 1-2 2.1-3 3.1c-21.4 21.4-47.4 38.1-76.3 48.6zM256 91.9c-11.1 0-20.1 9-20.1 20.1v6c-5.6 1.2-10.9 2.9-15.9 5.1c-15 6.8-27.9 19.4-31.1 37.7c-1.8 10.2-.8 20 3.4 29c4.2 8.8 10.7 15 17.3 19.5c11.6 7.9 26.9 12.5 38.6 16l2.2 .7c13.9 4.2 23.4 7.4 29.3 11.7c2.5 1.8 3.4 3.2 3.7 4c.3 .8 .9 2.6 .2 6.7c-.6 3.5-2.5 6.4-8 8.8c-6.1 2.6-16 3.9-28.8 1.9c-6-1-16.7-4.6-26.2-7.9l0 0 0 0 0 0c-2.2-.7-4.3-1.5-6.4-2.1c-10.5-3.5-21.8 2.2-25.3 12.7s2.2 21.8 12.7 25.3c1.2 .4 2.7 .9 4.4 1.5c7.9 2.7 20.3 6.9 29.8 9.1V304c0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1v-5.5c5.3-1 10.5-2.5 15.4-4.6c15.7-6.7 28.4-19.7 31.6-38.7c1.8-10.4 1-20.3-3-29.4c-3.9-9-10.2-15.6-16.9-20.5c-12.2-8.8-28.3-13.7-40.4-17.4l-.8-.2c-14.2-4.3-23.8-7.3-29.9-11.4c-2.6-1.8-3.4-3-3.6-3.5c-.2-.3-.7-1.6-.1-5c.3-1.9 1.9-5.2 8.2-8.1c6.4-2.9 16.4-4.5 28.6-2.6c4.3 .7 17.9 3.3 21.7 4.3c10.7 2.8 21.6-3.5 24.5-14.2s-3.5-21.6-14.2-24.5c-4.4-1.2-14.4-3.2-21-4.4V112c0-11.1-9-20.1-20.1-20.1zM48 352H64c19.5 25.9 44 47.7 72.2 64H64v32H256 448V416H375.8c28.2-16.3 52.8-38.1 72.2-64h16c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V400c0-26.5 21.5-48 48-48z"></path>
</svg>

<svg
  class="inline-flex h-[56px] w-[56px] fill-[#92103e]"
  viewBox="0 0 576 512"
  xmlns="http://www.w3.org/2000/svg"
>
  <path d="M384 128c70.7 0 128 57.3 128 128s-57.3 128-128 128H192c-70.7 0-128-57.3-128-128s57.3-128 128-128H384zM576 256c0-106-86-192-192-192H192C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192zM192 352a96 96 0 1 0 0-192 96 96 0 1 0 0 192z"></path>
</svg>

<svg
  class="inline-flex h-[56px] w-[56px] fill-[#041059]"
  viewBox="0 0 512 512"
  xmlns="http://www.w3.org/2000/svg"
>
  <path d="M493.7 .9L299.4 75.6l2.3-29.3c1-12.8-12.8-21.5-24-15.1L101.3 133.4C38.6 169.7 0 236.6 0 309C0 421.1 90.9 512 203 512c72.4 0 139.4-38.6 175.7-101.3L480.8 234.3c6.5-11.1-2.2-25-15.1-24l-29.3 2.3L511.1 18.3c.6-1.5 .9-3.2 .9-4.8C512 6 506 0 498.5 0c-1.7 0-3.3 .3-4.8 .9zM192 192a128 128 0 1 1 0 256 128 128 0 1 1 0-256zm0 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm16 96a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"></path>
</svg>

```html
<svg
  class="inline-flex h-[56px] w-[56px] fill-[#041059]"
  viewBox="0 0 512 512"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M493.7 .9L299.4 75.6l2.3-29.3c1-12.8-12.8-21.5-24-15.1L101.3 
  133.4C38.6 169.7 0 236.6 0 309C0 421.1 90.9 512 203 512c72.4 0 139.4-38.6
  175.7-101.3L480.8 234.3c6.5-11.1-2.2-25-15.1-24l-29.3 2.3L511.1 18.3c.6-1.5 
  .9-3.2 .9-4.8C512 6 506 0 498.5 0c-1.7 0-3.3 .3-4.8 .9zM192 192a128 128 0 1 
  1 0 256 128 128 0 1 1 0-256zm0 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm16 96a16 
  16 0 1 0 0-32 16 16 0 1 0 0 32z"
  ></path>
</svg>
```

## 不干正事

添加了一个 navToc,有些标题中英文混合导致定位不到，懒得解决了
